import React, { useState } from 'react';
import {
    View, Text, TextInput, TouchableOpacity, Platform,
} from 'react-native';
import { Modal, WhiteSpace } from '@ant-design/react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import PropTypes from 'prop-types';
import moment from 'moment';
import { startPlan } from '../../../../comconfig/sqlfun';


const Item = ({ ojbItem, getPlanList }) => {
    const [visible, setVisible] = useState(false);
    const [workTime, setWorkTime] = React.useState();
    const [show, setShow] = useState(false);
    const [date, setDate] = useState(new Date());
    const [planTime, setPlanTime] = useState(new Date());
    const onChange = (e, selectedDate) => {
        const currentDate = selectedDate || date;
        setShow(Platform.OS === 'ios');
        setDate(currentDate);
        setPlanTime(currentDate);
    };
    return (
        <View>
            <TouchableOpacity
                style={{
                    marginTop: 7,
                    height: 35,
                    backgroundColor: '#FFFFFF',
                    width: '100%',
                    borderRadius: 5,
                }}
                onPress={() => setVisible(true)}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                    <View style={{ marginLeft: 3 }}>
                        <Text style={{ fontSize: 18, marginTop: 4 }}>{ojbItem.title}</Text>
                    </View>
                </View>
                <Modal
                    title="准备执行"
                    transparent
                    onClose={() => { setVisible(false); }}
                    maskClosable
                    visible={visible}
                    footer={[
                        { text: '取消' },
                        {
                            text: '开始',
                            onPress: () => {
                                startPlan(parseInt(ojbItem.planid, 10),
                                    moment(new Date()).format('YYYY-MM-DD'),
                                    moment(planTime).format('YYYY-MM-DD'),
                                    parseFloat(workTime));
                                getPlanList();
                            },
                        },
                    ]}
                >
                    <WhiteSpace />
                    <View
                        style={{
                            flexDirection: 'row',
                            alignItems: 'center',
                        }}
                    >
                        <TouchableOpacity
                            onPress={() => { setShow(true); }}
                        >
                            <Text style={{ fontSize: 18, color: '#5EBFB5' }}>
                                计划完成时间
                            </Text>
                        </TouchableOpacity>
                        <Text style={{ fontSize: 18, color: '#007AFF', marginLeft: 10 }}>
                            {moment(planTime).format('YY-MM-DD')}
                        </Text>
                    </View>

                    <View style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                    }}
                    >
                        <View>
                            <TextInput
                                maxLength={2}
                                style={{ fontSize: 20, color: '#007AFF' }}
                                placeholder="时长"
                                keyboardType="numeric"
                                onChangeText={(text) => {
                                    // eslint-disable-next-line max-len
                                    let newText = (text !== '' && text.substr(0, 1) === '.') ? '' : text;
                                    newText = newText.replace(/^0+[0-9]+/g, '0');
                                    newText = newText.replace(/[^\d.]/g, '');
                                    newText = newText.replace(/\.{2,}/g, '.');
                                    // eslint-disable-next-line max-len
                                    newText = newText.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
                                    newText = newText.replace(/^(\\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                                    setWorkTime(newText);
                                }
                                }
                            />
                        </View>
                        <View>
                            <Text style={{ fontSize: 18, color: '#D48739' }}>小时</Text>
                        </View>
                    </View>
                </Modal>
            </TouchableOpacity>
            {show && (
                <DateTimePicker
                    textColor="#108EE9"
                    testID="dateTimePicker"
                    value={date}
                    mode="date"
                    is24Hour
                    display="default"
                    onChange={onChange}
                />
            )}
        </View>
    );
};
Item.defaultProps = {
    ojbItem: {},
    getPlanList: () => {},
};
Item.propTypes = {
    ojbItem: PropTypes.objectOf(PropTypes.any),
    getPlanList: PropTypes.func,
};
export default Item;
